$(function() {
	$.ajax({
		url: "http://127.0.0.1:3000/api/getbaicaijiatitle",
		type: "get",
		dataTye: "pson",
		success: function(data) {
			//console.log(data);
			var x = 0,
				moveX = 0,
				endX = 0,
				leftX = 0;
			var html = template("navGet", data);
			$("#navCool").html(html);
			var width = 0;
			//动态设置ul的宽度
			$.each($("#navCool>ul>li"), function(i, every) {
				width += $("#navCool>ul>li:nth-of-type(" + (i + 1) + ")").width();
			})
			$("#navCool>ul").width(width)
			//默认给第一个导航栏添加样式
			$("#navCool>ul>li:nth-of-type(1)").addClass("red");
			//导航栏点击事件
			$("#navCool>ul>li").click(function() {
				$("#navCool>ul>li").removeClass("red");
				$(this).addClass("red");
				//获取导航栏对应的id 用于发送ajax
				var titleid = $(this).attr("data-titleid");
				$.ajax({
					type: "get",
					url: "http://127.0.0.1:3000/api/getbaicaijiaproduct",
					async: true,
					data: {
						titleid: titleid
					},
					success: function(data) {
						//console.log(data)
						var html = template("menuGet", data);
						$("#menu").html(html)
					}
				});
			})
			//手指触摸发生事件
			$("#navCool>ul")[0].addEventListener("touchstart", function(e) {
				//获取当前 手指x坐标
				x = e.touches[0].clientX;
			})
			//手指移动发生事件
			$("#navCool>ul")[0].addEventListener("touchmove", function(e) {
				//获取移动事 手指x坐标       事件特性移动时会一直触发该事件
				moveX = e.touches[0].clientX;
				// 手指移动时的坐标  减  手指触摸时的坐标 得到移动时的坐标
				var goX = moveX - x;
				//  设置 ul的偏移值
				$(this).css({
							//已经偏移的坐标    +   应该引动的坐标    
					"left": (leftX + goX)
				})
			})
			// 手指离开屏幕触发事件
			$("#navCool>ul")[0].addEventListener("touchend", function(e) {
					//判断 是否移动到最右边                           得到的是带单位的字符串去掉单词     - 0  是转换成  数字
				if($("#navCool>ul").css("left").split("px")[0] - 0 >= 0) {
					$(this).css({
						"left": 0
					})
					//判断 是否移动到最左边                      得到的是带单位的字符串去掉单词     - 0  是转换成  数字                           屏幕的宽度-ul 的宽度 得到是  可以往左拖动的最大值     
				} else if($("#navCool>ul").css("left").split("px")[0] - 0 <= $(window).width() - $("#navCool>ul").width()) {
					$(this).css({
						"left": $(window).width() - $("#navCool>ul").width()
					})
				}
				// 记录手指离开时 已经偏移的坐标
				leftX = $("#navCool>ul").css("left").split("px")[0] - 0;

			})

			$.ajax({
				type: "get",
				url: "http://127.0.0.1:3000/api/getbaicaijiaproduct",
				async: true,
				data: {
					titleid: 0
				},
				success: function(data) {
					console.log(data)
					var html = template("menuGet", data);
					$("#menu").html(html)
				}
			});

		}
	})
})